<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="">
	*{
		margin:0;
		padding:0;
	}
	.box{
		width: 500px;
		background-color: pink;
        /*	块状元素水平居中	*/
		margin: 0 auto;
        /*	解决合并塌陷问题	overflow: hidden; */
		
	}
	.box div{
		width: 100px;
		height: 100px;
		background-color: red;
          /*	margin 外边距	*/
          /*   margin只有一个值时 上下左右都是该值 
          /*margin: 10px;*/
          /* 两个值的时候 上下是前一个值 左右是后一个值*/
          /*margin: 10px 50px;*/
          /*三个值的时侯 上是第一个值 左右是第二个值 下是第三个值 */
          /*margin: 10px 50px 100px;*/
          /*四个值的时候 上是第一个值 右是第二个值 下是第三个值 左是第四个值  */
          margin: 10px 20px 50px 100px;
            /*     
            单独设置margin属性
               margin-top 上外边距
               margin-bottom 下外边距
               margin-left 左外边距
               margin-right 右外边距

               小属性可以单独替换综合写法
                 */
          margin-top: 40px;
           /*     外边距塌陷合并问题：
                       注意：父子嵌套时，给儿子添加margin 第一个子元素的上外边距会扩散给父元素，最后一个子元素下外边距会扩散给父元素 
                       如果上面盒子的下外边距和下面盒子的上外边距：如果都是正数且不相等，就取最大值
                       如果值相等，只取一个值
                       如果一正一反 取两者的和
                       如果两个负数，取绝对值的最大值   */
	}
</style>
</head>
<body>
<div class="box">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
<div class="box">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>
</body>
</html>